<template>
  <div>
    <div class="setTop">
      <div class="text">个人中心</div>
    </div>
    <div style="height: 50px;width: 100%"></div>
    <div class="personalBg">
      <div class="personal">
        <div class="personalMsg">
          <div class="imgs"><img :src="myInfo.avatar"></div>
          <div class="msg">
            <p class="msgName">{{ myInfo.nickName }}</p>
            <div class="msgText">
              <div class="identity">身份:{{ myInfo.role + ' ' + myInfo.identify }}</div>
              <div class="vx">微信：{{ myInfo.weixin }}</div>
            </div>
            <div class="msgText">
              <div class="group">所属小组：{{
                  myInfo.sxGroup
                }}
              </div>
              <div class="renewal" @click="clickrenewal">更换</div>
            </div>
          </div>
        </div>
      </div>
    </div>
    <div class="myfun">
      <div class="myfunUl">
        <ul>
          <li v-for="(item,index) in myfunList" :key="index">
            <div class="myfunlis" @click="clickItem(item)">
              <img :src="item.menuIcon">
              <p>{{ item.menuName }}</p>
              <span class="circle" v-if="index==7"></span>
            </div>
          </li>
        </ul>
      </div>
    </div>
    <div class="personaldata">
      <p class="title" v-if="'组长' == myInfo.identify && myInfo.role.indexOf('外宣') != -1">个人数据</p>
      <div class="monthNum" v-if="'组长' == myInfo.identify && myInfo.role.indexOf('外宣') != -1">
        <div class="item">
          <p>{{ monInsertNum }}</p>
          <div>本月新增人数</div>
        </div>
      </div>

      <!--      <template v-if="'主管' == myInfo.identify && '商务' == myInfo.role">-->
      <div class="monthNum" v-for="i in groupNum" :key="i">
        <div class="itemGroup" :id="'echartMain'+i" style="width:100%;height:180px;">
        </div>
      </div>
      <!--      </template>-->

    </div>
    <!--    更改小组名弹窗-->
    <div class="cancelPop" v-show="affirmFlag" @click.self="affirmHid">
      <div class="cancelPopCon">
        <div class="confirmPop">
          <van-form validate-first @failed="affirmOnFailed">
            <!-- 通过 pattern 进行正则校验 -->
            <van-field
                v-model="groupNanes"
                name="pattern"
                label="小组名称："
                placeholder="请输入小组名称"
            />
            <div class="subBut">
              <van-button round block type="info" native-type="submit" @click="sureTask">提交</van-button>
            </div>
          </van-form>
        </div>
      </div>
    </div>
    <div class="coverPop" v-show="coverPopFlag">
      <div class="cover">
        <div class="tip">
          <p>提交过[{{ beforeApply }}],是否需要重新提交？</p>
          <div class="change">
            <div @click="coverCancel">取消</div>
            <div @click="coverConfirm">确定</div>
          </div>
        </div>
      </div>
    </div>
    <!--        底部导航栏-->
    <foot-nav></foot-nav>
    <div style="height: 50px;width: 100%"></div>
  </div>
</template>

<script>


import footNav from "../components/base/tabbar.vue"
import navApi from '@/api/nav'
import userApi from '@/api/user'
import * as echarts from 'echarts'

export default {
  name: "my",
  data() {
    return {
      avatar: '@/assets/img/defualt-user-photo.png',
      groupNum:0,
      monInsertNum: 0,
      beforeApply: "",
      myfunList: [],
      myInfo: {},
      cancelPopFlag: false,
      affirmFlag: false,
      groupNanes: '',
      coverPopFlag: false,
      option1: {
        title: {text: "商务"},
        xAxis: {
          type: 'category',
          data: ['1', '2', '3',"4"]
        },
        yAxis: {
          type: 'value'
        },
        series: [
          {
            data: [120, 200, 150,3],
            type: 'line'
          }
        ]
      },
      option3: {
        title: {text: "六六六"},
        xAxis: {
          type: 'category',
          data: ['1', '2', '3']
        },
        yAxis: {
          type: 'value'
        },
        series: [
          {
            data: [120, 200, 150],
            type: 'line'
          }
        ]
      },

    }
  },
  created() {
    this.navLoad()
    this.myInfoLoad()
  },
  methods: {
    myInfoLoad() {
      userApi.myInfo().then(res => {
        console.log(res)
        window.localStorage.setItem('role', res.data.record.role)
        this.myInfo = res.data.record
        this.groupNum = this.myInfo.groupNum
        // 判断当前用户的角色是否时外宣并且为组长
        if ('组长' == this.myInfo.identify && '外宣' == this.myInfo.role) {
          // 获取本月新增人数
          this.currentMonInsertNum()
        }
        if ('主管' == this.myInfo.identify && '商务' == this.myInfo.role) {
          // 获取本月新增人数
          userApi.curYearPerMonthPerGroupInsertNum().then(res => {
            console.log(res.data)
            var data = res.data;
            // 封装折线图数据
            var rows = data.map(item=>{

              let xAxisData = item.data.map(x=>x.mon);
              let seriesData = item.data.map(y=>y.num);

              let title={text:item.name.groupName}
              let xAxis={
                name:'月份',
                type:'category',
                data:xAxisData
              }
              let yAxis={
                name:'人数',
                type:'value'
              }
              let series=[
                {
                  data:seriesData,
                  type:'line'
                }
              ]
              let data = {title,xAxis,yAxis,series}
              return data;
            })
            // this.groupNum = rows.length
            console.log(rows);
            for (let i = 0; i < rows.length; i++) {
              echarts.init(document.getElementById('echartMain'+(i+1))).setOption(rows[i]);
            }

            //建议加上以下这一行代码，不加的效果图如下（当浏览器窗口缩小的时候）。超过了div的界限（红色边框）
            window.addEventListener('resize', function () {
              chart.resize()
            });
          })
        }

      })
    },
    currentMonInsertNum() {
      userApi.monInsertPersonNum().then(res => {
        this.monInsertNum = res.data.num
      })
    },
    navLoad() {
      // let local = window.localStorage
      // if (local.getItem("myNavs")) {
      //     this.myfunList = JSON.parse(local.getItem("myNavs"))
      //     return
      // }

      navApi.getMyNav().then(res => {
        this.myfunList = res.data.records
        // local.setItem("myNavs", JSON.stringify(res.data.records))
      })
    },
    clickItem(item) {
      if (item.menuCode == 'quit') {
        // 删除缓存
        this.$cookie.set("Authorization", '')
        this.$cookie.set("userId", '')
        window.localStorage.setItem("myNavs", '');
        window.localStorage.setItem("indexNavs", '');
      }
      window.localStorage.setItem('name', item.menuName)

      this.$router.push({
        path: item.menuPath
      })

    },
    affirmOnFailed(errorInfo) {
      // var _this = this;
      // ev.stopPropagation();
      console.log('failed', errorInfo);
      // this.affirmFlag = false
    },
    clickrenewal() {
      userApi.changeGroupStatus().then(res => {
        if (res.data.status == 1) {
          this.coverPopFlag = true
          this.beforeApply = res.data.msg.split(",")[1]
        } else {
          this.affirmFlag = true
        }
      })

    },
    affirmHid() {
      this.affirmFlag = false
    },
    sureTask() {

      if (this.groupNanes == '') {
        this.$toast('确认失败')
        this.affirmFlag = false
        return
      } else {
        userApi.changeGroup(this.groupNanes).then(data => {
          console.log(data)
        })
        this.$toast('提交成功！')
        this.affirmFlag = false

      }


    },
    coverCancel() {
      this.coverPopFlag = false
    },
    coverConfirm() {
      this.coverPopFlag = false
      this.affirmFlag = true
    }

    // echarts开始
    // echarts结束
  },
  mounted() {


  },
  components: {
    footNav
  },
}
</script>

<style lang="less" scoped>
.setTop {
  width: 100%;
  height: 50px;
  background: #fdffef;
  position: fixed;
  z-index: 100;

  .text {
    font-size: 20px;
    font-weight: bold;
    text-align: center;
    height: 50px;
    line-height: 50px;

  }
}

.personalBg {
  width: 100%;
  height: 180px;
  box-sizing: border-box;
  color: #000;
  background: url('../assets/img/my_bg.jpg') repeat;
  background-size: 420px 190px;
  position: relative;
  border-bottom: 10px solid #f8f8f8;

  .personal {
    width: 100%;
    position: absolute;
    bottom: 70px;
    left: 0;

    .personalMsg {
      width: 93%;
      margin: 0 auto;
      display: flex;
      align-items: center;

      .imgs {
        border-radius: 5px;
        overflow: hidden;
        margin-right: 10px;

        img {
          width: 51px;
          height: 51px;
        }
      }

      .msg {
        font-size: 12px;

        .msgName {
          font-size: 16px;
          font-weight: bold;
          margin-bottom: 6px;
        }

        .msgText {
          display: flex;

          .identity {
            margin-right: 20px;
          }
        }

        .group {
          margin-right: 20px;
        }

        .renewal {
          padding: 0 5px;
          border: 1px solid #fbef1a;
          border-radius: 3px;
        }
      }
    }

  }
}

.myfun {
  width: 100%;

  .myfunUl {
    padding: 10px;

    ul {
      display: flex;
      align-items: center;
      flex-wrap: wrap;

      li {
        width: 25%;
        height: 90px;
        font-size: 14px;

        .myfunlis {
          display: flex;
          align-items: center;
          flex-direction: column;
          justify-content: center;
          height: 90px;
          position: relative;

          img {
            width: 40px;
            height: 40px;
          }

          .circle {
            width: 10px;
            height: 10px;
            display: inline-block;
            border-radius: 50%;
            background: red;
            position: absolute;
            top: 10px;
            right: 10px;
          }
        }
      }
    }
  }
}

.cancelPop {
  /deep/ .van-form {
    width: 300px;
    margin: 0 auto;

  }

  width: 100%;
  min-height: 100%;
  background: rgba(0, 0, 0, .5);
  position: fixed;
  top: 0;
  left: 0;
  z-index: 8888;

  .cancelPopCon {
    position: relative;
    top: 200px;
    left: 0;

    .img {
      width: 240px;
      height: 72px;
      margin: 0 auto;
      margin-bottom: 40px;

      img {
        width: 240px;
        height: 72px;
      }
    }
  }

  /deep/ .van-button--round {
    border-radius: 0px;
  }

  .confirmPop {
    width: 300px;
    background: white;
    margin: 0 auto;

    .subBut {
      margin: 10px 0;

    }
  }

}

.personaldata {
  width: 100%;

  .title {
    padding: 10px;
  }

  .monthNum {
    padding: 10px;
    text-align: center;

    .item {
      box-shadow: 0 0 10px 1px #c8c8c8;
      border-radius: 5px;
      padding: 10px;

      p {
        margin-bottom: 15px;
      }
    }

    .itemGroup {
      /*box-shadow: 0 0 10px 1px #c8c8c8;*/
      border-radius: 5px;
    }
  }
}

.coverPop {
  width: 100%;
  height: 100%;
  position: fixed;
  left: 0;
  top: 0;

  .cover {
    width: 230px;
    background: #ffffff;
    position: absolute;
    left: 50%;
    margin-left: -115px;
    top: 50%;
    margin-top: -100px;
    /*border: 1px solid black;*/
    box-shadow: 0 0 10px 1px #9a9a9a;
    border-radius: 5px;

    .tip {

      padding: 30px 20px;
      text-align: center;

      .change {
        margin-top: 20px;
        display: flex;
        justify-content: space-between;

        div {
          width: 46%;
          border: 1px solid black;
        }
      }
    }
  }
}

</style>
